<template>
	<view>
		<view class="info_top">
			<view class="t1">{{ data.orderStatus }}</view>
			<view class="t2">您已兑换商品，请耐心等待</view>
			<view class="t2" v-if="data.orderStatus == '已收货'">感谢您的支持</view>
		</view>
		<view class="address">
			<view class="">
				<view class="flex tone">
					<view class="name">{{ data.userName }}</view>
					<view class="phone">{{ data.userPhone }}</view>
				</view>
				<view class="add">{{ data.userProvince }}{{ data.userCity }}{{ data.userCounty }}{{ data.userAddress }}</view>
			</view>
			<image src="/static/xian.png" class="imgads" mode=""></image>
		</view>
		<view class="item_c flex">
			<view class="img">
				<image :src="data.productCover" mode="aspectFill"></image>
			</view>
			<view class="img_r">
				<view class="title">{{ data.productName }}</view>
				<view class="">
					<view class="ss">
						<text>{{ data.productSpecs }}</text>
					</view>
					<view class="flex_jc_sb">
						<view class="price">
							实付款：
							<text>{{ data.productPoints }}</text>
							稻穗值
							<span v-if="data.productPrice != 0">
								+
								<text>{{ data.productPrice }}</text>
								{{ data.productPriceType == 1 ? '元' : '快递费' }}
							</span>
						</view>
						<view class="tts">x1</view>
					</view>
				</view>
			</view>
		</view>

		<view class="infos">
			<view class="item flex_jc_sb">
				<view class="tt_L">订单号</view>
				<view class="tt_r">
					{{ data.orderNumber }}
					<text @click="$copyFun(data.orderNumber)">复制</text>
				</view>
			</view>
			<view class="item flex_jc_sb">
				<view class="tt_L">下单时间</view>
				<view class="tt_r">{{ data.orderNumber }}</view>
			</view>
			<view class="item flex_jc_sb">
				<view class="tt_L">实际付款</view>
				<view class="tt_r">
					<text>{{ data.productPoints }}</text>
					稻穗值
					<span v-if="data.productPrice != 0">
						+
						<text>{{ data.productPrice }}</text>
						{{ data.productPriceType == 1 ? '元' : '快递费' }}
					</span>
				</view>
			</view>
			<view class="item flex_jc_sb">
				<view class="tt_L">支付方式</view>
				<view class="tt_r">
					<span v-if="data.productPrice != 0">微信支付+</span>
					稻穗值兑换
				</view>
			</view>
			<view class="item flex_jc_sb" v-if="data.orderStatus != '待发货'">
				<view class="tt_L">快递公司</view>
				<view class="tt_r">{{ data.deliveryName }}</view>
			</view>
			<view class="item flex_jc_sb" v-if="data.orderStatus != '待发货'">
				<view class="tt_L">快递单号</view>
				<view class="tt_r">
					{{ data.deliveryNumber }}
					<text @click="$copyFun(data.deliveryNumber)">复制</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { orderInfo } from '@/api/shop.js';

const data = reactive({});
onLoad((option) => {
	console.log(option);
	orderInfo({ id: option.id }).then((res) => {
		if (res.code == 200) {
			Object.assign(data, res.data);
		}
	});
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.info_top {
	margin: 42rpx auto;
	text-align: center;
	.t1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #1b1b1b;
	}
	.t2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #8e8e8e;
		margin-top: 14rpx;
	}
}
.address {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	position: relative;
	padding: 16rpx 20rpx;
	box-sizing: border-box;
	.imgads {
		width: 710rpx;
		height: 6rpx;
		position: absolute;
		bottom: 0%;
		left: 0%;
	}
	.tone {
		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1b1b1b;
		}
		.phone {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			margin-left: 15rpx;
		}
	}
	.add {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #75613e;
		margin-top: 16rpx;
	}
}
.item_c {
	margin: 20rpx auto;
	width: 710rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	.img {
		width: 140rpx;
		height: 140rpx;
		background: #ffffff;
		border-radius: 12rpx;
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 12rpx;
		}
	}
	.img_r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 140rpx;
		margin-left: 20rpx;
		flex: 1;
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1b1b1b;
		}
		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
			text {
				color: #892b1b;
			}
		}
		.ss {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1b1b1b;
			margin-bottom: 10rpx;
		}
	}
	.tts {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #1b1b1b;
	}
}

.infos {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
		margin-bottom: 30rpx;
		text {
			color: #75613e;
			margin-left: 15rpx;
		}
	}
	.item:last-child {
		margin: 0rpx;
	}
}
</style>
